<!DOCTYPE html>
<html lang="en">
<!-- HEAD -->
<div id = "load"  th:fragment="products">
<!-- SECTION -->
<div class="section" style="padding-top: 1px">
	<!-- container -->
	<div class="container">
		<!-- row -->
		<div class="row">
			<!-- section title -->
			<div class="col-md-12">
				<div class="section-title">
					<h3 class="title" id="navName">New Products</h3>
					<div id="slick-nav-1" class="products-slick-nav"></div>
				</div>
			</div>
			<!-- /section title -->
			
			<!-- Products tab & slick -->
			<div class="col-md-12">
				<div class="row">
					<div class="products-tabs" id = "load">
						<!-- tab -->
						<div id="tab1" class="tab-pane active">
							<div class="products-slick" data-nav="#slick-nav-1">
								<!-- product start -->
								<div class="product" th:each="prd : ${prds}">
									<div class="product-img">
										<img src="static/img/product01.png" alt="" th:src="@{${prd.pictures.size()}>0?${prd.pictures.get(0).url}:'static/image/image.png'}">
										<div class="product-label">
											<span class="sale">-30%</span>
											<span class="new" th:text="${prd.isNew eq '1'?'NEW':'TOP'}">NEW</span>
										</div>
									</div>
									<div class="product-body">
										<p class="product-category" th:text="${prd.productSymbol}">Category</p>
										<h3 class="product-name"><a href="#" th:text="${prd.productName}">product name goes here</a></h3>
										<h4 class="product-price" th:text="${prd.productPrice}">$980.00 <del class="product-old-price">$990.00</del></h4>
										<div class="product-rating">
											<i class="fa fa-star"></i>
											<i class="fa fa-star"></i>
											<i class="fa fa-star"></i>
											<i class="fa fa-star"></i>
											<i class="fa fa-star"></i>
										</div>
										<div class="product-btns">
											<button class="add-to-wishlist"><i class="fa fa-heart-o"></i><span class="tooltipp">add to wishlist</span></button>
											<button class="add-to-compare"><i class="fa fa-exchange"></i><span class="tooltipp">add to compare</span></button>
											<button class="quick-view"><i class="fa fa-eye"></i><span class="tooltipp">quick view</span></button>
										</div>
									</div>
									<div class="add-to-cart">
										<button class="add-to-cart-btn"><i class="fa fa-shopping-cart"></i> add to cart</button>
									</div>
								</div>
								<!-- /product ended-->
							</div>
						</div>
						<!-- /tab -->
					</div>
				</div>
			</div>
			<!-- Products tab & slick -->
			
		</div>
		<!-- /row -->
	</div>
	<!-- /container -->
</div>
</div>
</html>
